<template>
	<view>
		<view class="textarea-block">
			<view class="textarea-title">请求好友介绍</view>
			<textarea class="textarea-input"  v-model="fromDesc" placeholder="请输入请求"/>
		</view>
		<view class="textarea-block">
			<view class="textarea-title">其他备注信息</view>
			<textarea class="textarea-input" v-model="fromRemark" placeholder="请输入"/>
		</view>
		<!-- <view class="switch-block">
			<view class="switch-block-title">朋友圈状态</view>
			<switchBarItem :name="'不让他（她）看'" :initVal="switch1Val" @switch="toggleSwitch1"></switchBarItem>
			<switchBarItem :name="'不看他（她'" :initVal="switch2Val" @switch="toggleSwitch2"></switchBarItem>
		</view> -->
		
		<view class="add-friend-btn-wrap">
			<largeBtn @btnClk="sendApply">发送</largeBtn>
		</view>
		
		<alertPop :title="'提示'" :content="'您的介绍请求已提交，请等待对方确定'" :btnText="'我知道了'" @btnClk="closeApplySendTips" v-show="applySendTipsShow">
		</alertPop>
		
	    <!-- 添加好友提醒弹窗 -->
		<confirmPop :title="'提示'" :content="confirmPopContent" @maskClk="closeConfrimPop" @btnClk="confrimPopBtnClk"
			v-show="confirmPopShow">
		</confirmPop>
	</view>
</template>

<script>
    import { mapState } from "vuex"
	export default {
		data() {
			return {
				fromDesc:'',
				fromRemark:'',
				switch1Val: true,
				switch2Val: false,
				applySendTipsShow: false,

				confirmPopContent:'',
				confirmPopShow: false
			};
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad(options){
			this.toId = options.toId
			this.linkId = options.linkId
			this.evaId = options.evaId
			this.getUserDetail(options.toId).then((res)=>{
				this.toName = res.nickName
			})
			this.getUserDetail(options.linkId).then((res)=>{
				this.linkName = res.nickName
			})
		},
		methods: {
			toggleSwitch1(val) {
				this.switch1Val = val
			},
			toggleSwitch2(val) {
				this.switch2Val = val
			},
			getUserDetail(id){
				return this.$api.getUserInfoById(id).then(res=>{
					return res
				})
			},
			sendApply(){
				if(!this.fromDesc){
					uni.showToast({
						title: '请填写【请求好友介绍】内容',
						icon: 'none'
					})
					return
				}
				if(this.userInfo.id != this.linkId){
					// this.confirmPopContent = `是否发申请添加【${this.toName}】为好友？该申请需要先经过【${this.linkName}】的同意。`
					this.confirmPopContent = `发送请求后，当【${this.linkName}】和【${this.toName}】都同意您的申请后，即自动添加为您的好友`

				}else{
					this.confirmPopContent = `是否发申请添加【${this.toName}】为好友？`
				}
				this.showConfrimPop()
			},

			closeApplySendTips(){
				this.applySendTipsShow = false
				uni.navigateBack({
				    delta: 1
				});
			},
			
			showConfrimPop() {
				this.confirmPopShow = true
			},

			confrimPopBtnClk(item = {}) {
				if (item.type === 'confirm') {
					this.sendFriendApply()
				}
				if (item.type === 'cancel') {

				}
				this.closeConfrimPop()
			},
			closeConfrimPop() {
				this.confirmPopShow = false
			},
			sendFriendApply(){
				const data = {
					fromUserId: this.userInfo.id * 1,
					toUserId: this.toId * 1,
					evaluateId: this.evaId,
					applyContent: this.fromDesc,
					otherRemark: this.fromRemark	
				}
				this.$api.sendAddFriendApplyByEvaluate(data).then(() => {
					uni.showToast({
						title: '请求申请已发送',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch((err)=>{
                    uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.textarea-block {
		padding: 46rpx 40rpx 0 40rpx;

		.textarea-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #4A505C;
			line-height: 44rpx;
			margin-bottom: 10rpx;
		}

		.textarea-input {
			width: 670rpx;
			height: 140rpx;
			border: 2rpx solid #DEDEDE;
			background-color: #FCFCFC;
			box-sizing: border-box;
			padding: 18rpx 24rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #323746;
			line-height: 44rpx
		}
	}

	.switch-block {
		padding: 46rpx 40rpx 148rpx 40rpx;
		.switch-block-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #4A505C;
			line-height: 44rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.add-friend-btn-wrap {
		position: fixed;
		left: 40rpx;
		bottom: 48rpx;
		width: 670rpx;
	}
</style>
